<template>
    <div class="shopCard" @click="$router.push('/goods/detail/' + goodsId)">
        <img v-lazy="shopImg" class="shopImg">
        <div class="shopContent">
            <span class="shopName">{{goodsName}}</span>
            <span class="shopName_sub">{{shopNameSub}}</span>
            <p class="shopPrice" v-if="memberPrice==0 || stageNum ==1">¥ {{memberPrice | money}}</p>
            <p class="shopPrice" v-else>¥ {{(memberPrice/stageNum) | money}}*{{stageNum}}期</p>
            <!-- <span v-if="price" style="float:right;">¥{{price | money}}</span> -->
            <!-- <p class="shopInfo"> 
                <span class="fen">分</span>
                <span class="jin">金</span>
                <span class="price">¥1867.00&nbsp;+&nbsp;¥530.00</span>
            </p> -->
            <div class="btnForBuy">立即购买</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'shopCard',
    props: {
        goodsId: {default: ''},
        shopImg: { default: ''}, // 商品图片
        goodsName: { default: ''}, //商品名字
        shopNameSub: { default: ''}, //商品短标题
        memberPrice: { default: 0}, //原价
        price: { default: 0}, //现价
        stageNum: {default: 12}, //分期期数
        showSoldNum: {default: 0}, //销量
    },

    data() {
        return {

        }
    }
}
</script>

<style lang="scss" scoped>
@import './../assets/default.scss';
.shopCard {
    border-radius: 5px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    background-color: #fff;
    overflow-x: hidden;
    .shopImg {
        width: 100%;
        height: auto;
        border-top-left-radius: 5px;
        border-top-right-radius: 7px;
    }

    .shopContent {
        padding: 0 7px;
        .shopName {
            white-space: pre-wrap;
            border: 0px solid black;
            position: relative;
            box-sizing: border-box;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            flex-direction: column;
            align-content: flex-start;
            flex-shrink: 0;
            font-size: 14px;
            // text-align: left;
            text-align: center;
            line-height: 18px;
            height: 36px;
            margin-top: 2px;
            margin-bottom: 2px;
            color: #333333;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .shopName_sub{
            color: #888888;
            font-size: 12px;
            text-align: center;
            display: block;
            position: relative;
            box-sizing: border-box;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }

        .btnForBuy{
            color: #fff;
            font-size: 16px;
            line-height: 1;
            width: 70%;
            text-align: center;
            background: #fe8749;
            margin: 10px auto;
            display: block;
            padding: 8px 0;
            border-radius: 10px;
        }

        .shopPrice {
            color: #fe8749;
            margin: 3px 0;
            text-align: center;
            span {
                margin-left: 5px;
                text-decoration: line-through;
                color: #999;
                font-size: 12px;
                vertical-align: text-bottom;
            }
        }

        .shopInfo {
            color: $defaultColor;
            font-size: 12px;
            .fen, .jin {
                display: inline-block;
                color: #fff;
                height: 16px;
                line-height: 16px;
                width: 16px;
                text-align: center;
                margin-right: 5px;
            }
            .fen {
                background-color: rgb(8, 46, 138);
            }
            .jin {
                background-color: rgb(230, 63, 98);
            }

            .price { vertical-align: text-bottom; }
        }

        .shopSale {
            color: #999;
            line-height: 24px;
            font-size: 12px;
        }
    }
}
</style>
